<template>
<transition name="fade">
    <div v-if="togg"></div>
</transition>
<button @click="togg=!togg">切换</button>
</template>

<script>
import { ref } from 'vue'
export default {
  setup () {
    const togg = ref(false)
    return { togg }
  }
}
</script>

<style lang="less" scoped>
div{
    width: 100px;
    height: 100px;
    background: red;
    opacity: 1;
}
// 进入（显示，创建）
// name的名称-enter 进入前 （vue3.0 v-enter-from）
// name的名称-enter-active 进入中
// name的名称-enter-to 进入后
// .fade-leave {
//     opacity: 1
// }
// .fade-leave-active {
//     transition: all 1s;
// }
// .fade-leave-to {
//     opacity: 0
// }
// 离开（隐藏，移除）
// name的名称-leave 进入前 （vue3.0 v-leave-from）
// name的名称-leave-active 进入中
// name的名称-leave-to 进入后
</style>
